<template>
  <view class="weather-container">
    <!-- 加载状态 -->
    <view v-if="loading" class="loading">
      <view class="loading-icon"></view>
      <text>加载中...</text>
    </view>

    <!-- 错误提示 -->
    <view v-if="error" class="error">
      <text>获取天气失败，请重试</text>
    </view>

    <!-- 明天温度信息 -->
    <view v-if="tomorrowWeather && !loading && !error" class="temp-info">
      <text class="title">明天天气</text>
      <view class="temp-values">
        <text class="temp-item">最高温：{{ tomorrowWeather.high }}</text>
        <text class="temp-item">最低温：{{ tomorrowWeather.low }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      weatherURL: "http://t.weather.sojson.com/api/weather/city/101230501",
      tomorrowWeather: null, // 存储明天的天气数据
      loading: true,
      error: false
    };
  },
  onLoad() {
    this.fetchTomorrowTemp();
  },
  methods: {
    fetchTomorrowTemp() {
      this.loading = true;
      this.error = false;

      uni.request({
        url: this.weatherURL,
        method: 'GET',
        success: (res) => {
          this.loading = false;
          if (res.data && res.data.status === 200 && res.data.data.forecast.length > 1) {
            // forecast[0]是今天，forecast[1]是明天
            this.tomorrowWeather = res.data.data.forecast[1];
          } else {
            this.error = true;
          }
        },
        fail: () => {
          this.loading = false;
          this.error = true;
        }
      });
    }
  }
};
</script>

<style scoped>
.weather-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f0f7ff;
  padding: 20rpx;
}

/* 加载样式 */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loading-icon {
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid #e0efff;
  border-top-color: #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 错误样式 */
.error {
  color: #f56c6c;
  font-size: 32rpx;
  padding: 20rpx;
}

/* 温度信息样式 */
.temp-info {
  background-color: #fff;
  padding: 40rpx 60rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  text-align: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}

.temp-values {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.temp-item {
  font-size: 32rpx;
  color: #666;
}

.temp-item:first-child {
  color: #f56c6c; /* 最高温红色调 */
}

.temp-item:last-child {
  color: #409eff; /* 最低温蓝色调 */
}
</style>